<!DOCTYPE html>
<html lang="en">
<head>
    <title>展会管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style type="text/css">
        .leftFilter {
            float: left;
            text-align: left;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<section class="content" id="list">
    <div style="text-align:right;padding-bottom: 10px;">
        <div class="leftFilter" style="width: 80px;">
            <select v-model="monthChecked" v-select2="" class="form-control select2 monthSelect">
                <option value="">月份</option>
                <option v-for="option in listMonth" :value="option.id">{{option.name}}</option>
            </select>
        </div>
        <div class="leftFilter" style="width: 150px;">
            <select v-model="companyChecked" class="form-control select2 companySelect">
                <option value="">公司筛选</option>
                <option v-for="option in listCompany" v-if="isNotBigCusCompany(option.name)" :value="option.id">
                    {{option.name}}
                </option>
            </select>
        </div>
        <div class="leftFilter" style="width: 95px;">
            <select v-model="brandChecked" class="form-control select2 brandSelect">
                <option value="">品牌筛选</option>
                <option v-for="option in listBrand" :value="option.id">{{option.name}}</option>
            </select>
        </div>
        <div class="leftFilter" style="width: 135px;">
            <select v-model="exhibitionTypeChecked" v-select2="" class="form-control select2 exhibitionTypeSelect">
                <option value="">展会类型</option>
                <option v-for="option in exhibitionType" :value="option.key">{{option.name}}</option>
            </select>
        </div>
        <input v-if="PerES" type="button" value="展会安排汇总" class="btn oaBtn btn-sm" @click="exhibitionSummary()"
               style="margin-right: 10px;">
        <input v-if="salerManager" type="button" value="新增展会" id="addExhibition" class="btn oaBtn btn-sm"
               style="margin-right: 10px;" @click="add(0,'add')">
        <input type="button" value="展会报表" id="exhibitioneReport" class="btn oaBtn btn-sm " @click="report()">
    </div>
    <div class="box-body no-padding iframeH3" style="overflow: auto;background: #fff;border-top: 1px solid #cbcbcd;
    border-bottom: 1px solid #cbcbcd">
        <table class="table table-hover table-bordered" style="margin: -1px 0">
            <thead>
            <tr>
                <th style="width:10%;text-align: center">展会时间</th>
                <th style="width:15%;text-align: center">展会名称</th>
                <th style="width:20%;text-align: center">展会地点</th>
                <th style="width:13%;text-align: center">展会类型</th>
                <th style="width:30%;text-align: center">备注</th>
                <th style="width:5%;text-align: center" v-if="salerManager || bigAreaManager || bigCusSpport">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in list">
                <td>{{item.exhibitionDate}}</td>
                <td>{{item.name}}</td>
                <td>{{item.provinceName}}{{item.cityName}}{{item.address}}</td>
                <td>{{item.exhibitionTypeName}}</td>
                <td>{{item.remark}}</td>
                <td v-if="salerManager || bigAreaManager || bigCusSpport" style="text-align: center">
                    <a href="javascript:void(0);" @click="edit(item.id,'edit')">修改</a>
                </td>
            </tr>
            </thead>
        </table>
    </div>
    <div class="oa-pager text-center">
        共<span id="allCount">{{recordCount}}</span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage">{{pageIndex}}</span>/<span id="allPage">{{pageCount}}</span>&nbsp;&nbsp;&nbsp;
        <span id="first" class="oa-pager-button" @click="pagination('first')">首页</span>
        <span id="prev" class="oa-pager-button" @click="pagination('pre')">上一页</span>
        <span id="next" class="oa-pager-button" @click="pagination('next')">下一页</span>
        <span id="last" class="oa-pager-button" @click="pagination('last')">尾页</span>
    </div>

    <!-- /.box-body -->
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript">
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var app = new Vue({
        el: '#list',
        data: {
            currentUser: getCurrentUser(),
            pageIndex: 1,
            pageCount: 1,
            recordCount: 1,
            list: [],
            listCompany: [],
            listBrand: [],
            listMonth: getMonth(),
            exhibitionType: [],
            monthChecked: "",
            brandChecked: "",
            companyChecked: "",
            exhibitionTypeChecked: "",
            rightOpENames: [],
            salerManager: false,
            bigAreaManager: false,
            bigCusSpport:false,
            PerES: false
        },
        methods: {
            refresh: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.crm.exhibition.getByPage, {
                    companyId: that.companyChecked,
                    userId: getCurrentUser().id,
                    brandId: that.brandChecked,
                    monthKey: that.monthChecked,
                    pageIndex: that.pageIndex,
                    exhibitionType: that.exhibitionTypeChecked
                }, function (data) {
                    that.list = data.records;
                    that.pageIndex = data.pageIndex;
                    that.pageCount = data.pageCount;
                    that.recordCount = data.recordCount;

                    $(".iframeH3").scrollTop(0);
                });
            },
            isNotBigCusCompany: function (item) {
                if (item.indexOf("大客户") > -1)
                    return false;
                else
                    return true;
            },
            pagination: function (auction) {
                if (auction == "first")
                    this.pageIndex = 1;
                else if (auction == "next" && this.pageIndex < this.pageCount)
                    this.pageIndex += 1;
                else if (auction == "pre" && this.pageIndex > 1)
                    this.pageIndex -= 1;
                else if (auction == "last")
                    this.pageIndex = this.pageCount;
                this.refresh();
            },
            exhibitionSummary: function () {
                $.dialog({
                    content: 'url:exhibitionSummary.html?&t=' + new Date(),
                    title: '2018年展会安排汇总',
                    width: 850,
                    height: 450,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            add: function (id, pageType) {
                $.dialog({
                    content: 'url:detail.html?id=' + id + '&pageType=' + pageType + "&t=" + new Date(),
                    title: '新增展会',
                    width: 500,
                    height: 500,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            edit: function (id, pageType) {
                $.dialog({
                    content: 'url:detail.html?id=' + id + '&pageType=' + pageType + "&t=" + new Date(),
                    title: '修改展会',
                    width: 500,
                    height: 500,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            report: function () {
                top.addTabs({id: "exhibitionReport", title: '展会报表', close: true, url: 'crm/exhibition/report.html'});
            }
        },

        mounted: function () {
            var that = this;
            that.companyChecked = currentUser.companyId;
            var paramCompanyId = $.wyui.page.urlParams.companyId
            var paramBrandId = $.wyui.page.urlParams.brandId;
            var paramMonth = $.wyui.page.urlParams.month;
            var paramExhibitionType = $.wyui.page.urlParams.exhibitionType;
            if (paramCompanyId != undefined)
                that.companyChecked = paramCompanyId;
            if (paramBrandId != undefined)
                this.brandChecked = paramBrandId;
            if (paramMonth != undefined)
                this.monthChecked = paramMonth;
            if (paramExhibitionType != undefined)
                this.exhibitionTypeChecked = paramExhibitionType;

            $.wyui.postMethod(urlConfig.system.company.getCompanyList, {}, function (data) {
                that.listCompany = data;
            });
            $.wyui.postMethod(urlConfig.system.enum.selectByType, {"enumType": "exhibitionType"}, function (data) {
                that.exhibitionType = data;
            });
            $.wyui.postMethod(urlConfig.crm.exhibition.getBrandList, {}, function (list) {
                that.listBrand = list.records;
            });

            this.refresh();

            //权限
            $.wyui.postMethod(urlConfig.system.rightOp.getRightOpByUserId, {userId: getCurrentUser().id}, function (rightOps) {
                for (var i = 0; i < rightOps.length; i++) {
                    that.rightOpENames.push(rightOps[i].eName);
                }
                if ($.inArray('SalerManager', that.rightOpENames) > -1) {
                    that.salerManager = true;
                }
                if ($.inArray('BigAreaManager', that.rightOpENames) > -1) {
                    that.bigAreaManager = true;
                }
                if ($.inArray('PerES', that.rightOpENames) > -1) {
                    that.PerES = true;
                }
                if ($.inArray('bigCusSpport', that.rightOpENames) > -1) {
                    that.bigCusSpport = true;
                }
            });

            repaintFreeze = function () {
                var freezeElement = $(".table");
                $(".freezeHead").remove();
                var tableCalss = freezeElement.attr("class");
                var tableStyle = freezeElement.attr("style");
                var tableHead = freezeElement.find("thead").prop("outerHTML");
                var arr = new Array();
                arr.push("<div class='freezeHead' style='position: absolute;'>");
                arr.push("<table class='" + tableCalss + "' style='" + tableStyle + "'>");
                arr.push(tableHead);
                arr.push("</table>");
                arr.push("</div>");
                $(".table").before(arr.join(" "));
                $(".freezeHead table").eq(0).width(freezeElement.eq(1).width());
                $(".table").eq(1).find("th").each(function (i, item) {
                    $(".freezeHead table th").eq(i).width(freezeElement.eq(1).find("th").eq(i).width());
                });
            }
            repaintFreeze();
            setInterval(function () {
                repaintFreeze();
            }, 300);

            $(".select2").select2();
            $(".select2").select2().on('select2:select', function (e) {
                var clazz = $(this).attr("class");
                if (clazz.indexOf("company") > -1)
                    that.companyChecked = $(this).val();
                else if (clazz.indexOf("brand") > -1)
                    that.brandChecked = $(this).val();
                else if (clazz.indexOf("month") > -1)
                    that.monthChecked = $(this).val();
                else if (clazz.indexOf("exhibitionType") > -1)
                    that.exhibitionTypeChecked = $(this).val();
                that.pageIndex = 1;
                that.refresh();
            });
        }
    });


</script>

</body>
</html>